<template>
    <page>
        <ul class="h50 tab tc white-bg text3" flex="box:mean">
            <li :class="{active: currentIndex == 0}" @click="currentIndex = 0">未兑换</li>
            <li :class="{active: currentIndex == 1}" @click="currentIndex = 1">已兑换</li>
        </ul>
        <infinite class="content" :onInfinite="onInfinite" ref="myscroll">
            <div v-for="i in list" class="white-bg mt10">
                <p class="h40 px12"><i class="iconfont icon-home mr4"></i>{{i.order.shopId | shopName}}</p>
                <div v-for="i2 in i.detaillist" flex="box:first" class="px12 py8 bdt bdb"
                     style="background-color: #fafafa">
                    <m-img :src="i2.image" class="img" ratio="1"></m-img>
                    <div class="ml20">
                        <p>{{i2.title}}</p>
                        <div flex="main:justify" class="mt10 f14">
                            <p> {{i2.price}}积分<span class="text3 ml4">x{{i2.number}}</span></p>
                            <span class="c7">{{i2.number * i2.price}}积分</span>
                        </div>
                    </div>
                </div>
                <div class="px12 h40 tr text2 f14" flex="main:justify cross:center">
                    <p>共{{i.detaillist.length}}件商品,总额:<span class="c7">{{i.order.payMoney}}积分</span></p>
                    <router-link tag="span" :to="{name: 'store_qr', query: {id: i.order.id}}"
                                 class="fsm _bd c1 btn f12" v-if="state == 2">
                        兑换二维码
                    </router-link>
                    <span class="fsm _bd c5 btn f12" v-else>已兑换</span>
                </div>
            </div>
        </infinite>
    </page>
</template>
<script>
  export default {
    data () {
      return {
        currentIndex: 0,
        state: 2,
        list: [],
        form: {}
      }
    },
    filters: {
      shopName (shopId) {
        const item = $g.shopList.find(x => x.id == shopId)
        return item ? item.shopName : '-'
      }
    },
    computed: {},
    methods: {
      PitsPullData () {},
      PitsPushData () {},
      async onInfinite (page) {
        let {obj: {dataList, total}} = await this.$get('order/getOderAndDetailByUserId', {
          page,
          state: this.state
        })
        this.list.push(...dataList)
        return this.list.length < total
      }
    },
    watch: {
      async currentIndex (v) {
        this.state = v + 2
        this.list = []
        await this.$nextTick()
        this.$refs.myscroll.reset()
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../css/variable';

    .tab {
        .active {
            color: $c2;
            border-bottom: 2px solid;
        }
    }

    .content {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .img {
        width: 64px;
    }

    .btn {
        border-radius: 999px;
        line-height: normal;
        padding: 2px 6px;
    }
</style>
